<template>
<view>
<!--pages/topicality/ruxue/ruxue.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view class="body">
  <!-- 轮播图 -->
  <view style="margin: 30rpx 30rpx 0 30rpx;" v-if="ruxueData.lunbo">
    <swiper indicator-dots="true" autoplay="true" indicator-color="#CCCCCC" indicator-active-color="#959595" style="height: 348rpx;">
      <view v-for="(item, index) in ruxueData.lunbo" :key="index" @tap="bannerClick" :data-url="item.url" :data-appid="item.appid" :data-title="item.title">
        <swiper-item>
          <image :src="item.images" class="swimg">
            <view class="imgtext">{{item.title}}</view>
          </image>
        </swiper-item>
      </view>
    </swiper>
  </view>

  <!-- 必用助手 -->
  <view class="aide-box" v-if="ruxueData.biyao">
    <view class="title">必用助手</view>
    <view class="aide-icon-box">
      <view v-for="(item, index) in ruxueData.biyao" :key="index" class="aide-icon" @tap="aideClick" :data-url="item.url" :data-title="item.title">
        <image :src="item.images"></image>
        <text>{{item.title}}</text>
      </view>
    </view>
  </view>

  <!-- 阶段 -->
  <view class="stage-box">
    <!-- 阶段tab -->
    <view :class="scrollTop>100?'stageFixed':'stageAbsolute'">
      <view v-for="(item, index) in stageData" :key="index" class="stage-title" :data-index="index" @tap="stageClick">
        <text :style="'color:' + (stageIndex == index ? '#FF6600': '#242424')">{{item.name}}</text>
        <image v-if="stageIndex == index ?true:false" src="/static/images/sel-icon.png"></image>
      </view>
    </view>
    <!-- swiper -->
    <view>
      <swiper @change="swcontent" :current="stageIndex" :style="'height:' + winHeight + 'rpx'">
        <swiper-item v-for="(item, index) in stageData" :key="index">
          <scroll-view style="height:100%;margin-top:30rpx;" scroll-y>
            <view class="stage-content" v-if="stageData[stageIndex]">
              <view class="title">{{stageData[stageIndex].name}}</view>
              <view class="text1">{{stageData[stageIndex].data.desc}}</view>
              <view class="stage-icon-center">
                <view class="stage-icon-box">
                  <view v-for="(item, index2) in stageData[stageIndex].data.linkIcon" :key="index2" class="stage-icon" @tap="iconClick" :data-url="item.url" :data-title="item.title" :data-type="item.type" :data-id="item.id">
                    <image :src="item.images"></image>
                    <text>{{item.title}}</text>
                  </view>
                </view>
              </view>

              <!-- 文章列表 -->
              <navigator v-for="(item, index2) in stageData[stageIndex].data.zixun" :key="index2" :class="stageData[stageIndex].isMore?'content':'contents'" :url="'../../article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
                <view class="title">
                  <text>{{item.title}}</text>
                </view>
                <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
              </navigator>
              <!-- 查看更多 -->
              <view class="see-more" v-if="stageData[stageIndex].data.zixun.length>3 && stageData[stageIndex].isMore" @tap="seemore" :data-name="stageData[stageIndex].name">
                <view>查看更多</view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>

  <!-- 快捷导航 -->
  <fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav"></fastnav>
</view>
</view>
</template>

<script>
// pages/topicality/ruxue/ruxue.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
import fastnav from "../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      stageIndex: 0,
      stagetitle: ["准备阶段", "报名阶段", "录取阶段"],
      showtk: false,
      // 跳转外链的弹框显示
      showNav: true,
      // 快捷导航是否展开
      isMore: true,
      stageData: [],
      scrollTop: 0,
      citycode: "",
      qrcodeimg: "",
      type: "",
      winHeight: "",
      ruxueData: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      type: options.type ? options.type : '',
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
    });
    util.getUrl(app.globalData.url).then(res => {
      // 获取城市公众号二维码
      util.cityConfig(this.citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
      this.getruxueData();
    }); // 获取屏幕高度

    uni.getSystemInfo({
      success: res => {
        var clientHeight = res.windowHeight,
            clientWidth = res.windowWidth,
            rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        this.setData({
          winHeight: calc
        });
      }
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "本地宝-积分入学",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: "本地宝-积分入学",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      query: {
        type: this.type,
        city: this.citycode
      }
    };
  },
  methods: {
    // 入学接口
    getruxueData() {
      let data = {
        action: "ruxue",
        type: this.type,
        citycode: this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        let ruxueData = res.data.data;
        let stageData = [{
          name: "准备阶段",
          data: {
            desc: ruxueData.peizhi[0].zhunbei_desc,
            linkIcon: ruxueData.zhunbei,
            zixun: ruxueData.zhunbei_zixun
          },
          isMore: true
        }, {
          name: "报名阶段",
          data: {
            desc: ruxueData.peizhi[0].baoming_desc,
            linkIcon: ruxueData.baoming,
            zixun: ruxueData.baoming_zixun
          },
          isMore: true
        }, {
          name: "录取阶段",
          data: {
            desc: ruxueData.peizhi[0].luqu_desc,
            linkIcon: ruxueData.luqu,
            zixun: ruxueData.luqu_zixun
          },
          isMore: true
        }];
        this.setData({
          ruxueData,
          stageData
        });
        uni.setNavigationBarTitle({
          title: ruxueData.peizhi[0].cityname + ruxueData.peizhi[0].level
        });
      });
    },

    // banner点击事件
    bannerClick(e) {
      let url = e.currentTarget.dataset.url;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (url.indexOf("pages") == -1 && url.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, url);
      } else {
        util.navMethod(url, appid);
      }
    },

    // 必要助手点击事件
    aideClick(e) {
      let url = e.currentTarget.dataset.url;
      let linkname = e.currentTarget.dataset.title;

      if (url.indexOf("pages") == -1 && url.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, url);
      } else {
        util.navMethod(url);
      }
    },

    // 阶段点击事件
    stageClick(e) {
      let stageIndex = e.currentTarget.dataset.index;
      this.setData({
        stageIndex
      });
    },

    swcontent: function (e) {
      var currentid = e.detail.current;
      this.setData({
        stageIndex: currentid
      });
    },

    // 阶段icon点击事件
    iconClick(e) {
      let url = e.currentTarget.dataset.url;
      let linkname = e.currentTarget.dataset.title;
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + this.citycode
        });
      } else {
        if (url.indexOf("pages") == -1 && url.indexOf("mp.weixin.qq.com") == -1) {
          this.setData({
            showtk: true
          });
          util.navContact(linkname, url);
        } else {
          util.navMethod(url);
        }
      }
    },

    // 查看更多
    seemore(e) {
      let name = e.currentTarget.dataset.name;
      this.stageData.forEach((v, k) => {
        if (name == v.name) {
          this.stageData[k].isMore = false;
        }
      });
      this.setData({
        // isMore: false,
        stageData: this.stageData
      });
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false,
        scrollTop: e.scrollTop
      });
    }
  }
};
</script>
<style>
/* pages/topicality/ruxue/ruxue.wxss */
page{background-color: #F6F5F8;}
.body{margin: 0rpx;}

/* 轮播图 */
.swimg{width: 686rpx;height: 294rpx;border-radius: 10rpx;position: relative;}
.imgtext{background:rgba(0,0,0,0.41);padding:10rpx 20rpx;width: 651rpx;
  border-radius:0rpx 0rpx 10rpx 10rpx;font-size:28rpx;color: #ffffff;position: absolute;bottom: 0;}

/* 必用助手 */
.aide-box{background:rgba(255,255,255,1);opacity:1;border-radius:7px;padding: 40rpx 30rpx;margin: 0 30rpx;}
.title{font-size:34rpx;font-family:PingFang SC;font-weight:600;
color:rgba(36,36,36,1);opacity:1;}
.aide-icon-box{display: flex;align-items: center;margin-top: 44rpx;}
.aide-icon{display: flex;flex-direction: column;align-items: center;margin-right: 70rpx;}
.aide-icon image{width: 70rpx;height: 70rpx;}
.aide-icon text{font-size:26rpx;font-family:PingFang SC;font-weight:500;
color:rgba(36,36,36,1);opacity:1;margin-top: 22rpx;width: 104rpx;}

/* 阶段 */
.stage-box{margin-bottom: 50rpx;position: relative;height: 100%}
.stageAbsolute{display: flex;justify-content: center;padding-top: 30rpx;}
.stageFixed{background-color: #ffffff;margin-bottom: 0rpx;padding: 30rpx 55rpx;
position: fixed;top: 0rpx;/*  #ifdef  H5  */top: calc(88rpx + constant(safe-area-inset-top));top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */z-index:5;width: 100%;display: flex;justify-content: center;}
.stage-title{display: flex;flex-direction: column;align-items: center; margin-right: 75rpx;}
.stage-title text{font-size:30rpx;font-family:PingFang SC;font-weight:600;line-height:42rpx;
opacity:1;margin-bottom: 15rpx;white-space:nowrap;}
.stage-title image{width: 42rpx;height: 19rpx;}
/* 阶段详情 */
.stage-content{background:rgba(255,255,255,1);opacity:1;border-radius:7px;padding: 32rpx 30rpx;margin:0 30rpx 30rpx 30rpx;}
.text1{font-size:26rpx;font-family:PingFang SC;font-weight:400;line-height:36rpx;
color:rgba(100,100,100,1);opacity:1;margin-top: 24rpx;}
.stage-icon-center{margin: 0 10rpx;}
.stage-icon-box{display: flex;align-items: center;margin-top: 44rpx;
flex-wrap: wrap;}
.stage-icon{display: flex;flex-direction: column;align-items: center;margin-right: 70rpx;
margin-bottom: 24rpx;}
.stage-icon:nth-child(3n){margin-right:0rpx;}
.stage-icon image{width: 78rpx;height: 78rpx;}
.stage-icon text{font-size:26rpx;font-family:PingFang SC;font-weight:500;
color:rgba(84,84,84,1);opacity:1;margin-top: 22rpx;width: 156rpx;text-align: center;}
/* 文章列表 */
.content{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;}
.content .title{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
.content text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.content image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.zuan-time{display: flex;align-items: center;justify-content: space-between; margin-top:15rpx; 
  width: 100%;}
.zuanti{border:2rpx solid rgba(255,102,0,1);opacity:1;border-radius:16rpx;font-size:18rpx;
  font-family:PingFang SC;font-weight:500;color:rgba(255,102,0,1);padding:5rpx 12rpx;}
.time{font-size:24rpx;font-family:PingFang SC;font-weight:400;color:rgba(153,153,153,1);}
.content:last-child{border: none}
/* 只显示前几条数据 */
.content:nth-of-type(n+4){display:none;}

.contents{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;margin-top: 10rpx;}
.contents .title{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start}
.contents text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.contents image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.contents:last-child{border: none}


/* 是否省略 */
/* 修改列数*/
.ellipsis {
  -webkit-line-clamp: 3;
  opacity: 0.75;
  overflow: hidden; 
}
/* 查看更多 */
.see-more{display: flex;justify-content: center;margin-top: 20rpx;}
.see-more view{background-color: #EEEEEE;padding: 20rpx 40rpx;font-size:26rpx;border-radius:12rpx;
font-family:PingFang SC;font-weight:600;color: #141414;text-align: center;width: 200rpx;}


</style>